<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>我的信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="24">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="handleEdit()"
            >编辑</el-button
          >
        </div>
        <div>
          <el-descriptions :column="2">
            <el-descriptions-item label="姓名">
              <span>{{ this.userinfo.userName }} </span></el-descriptions-item
            >
            <el-descriptions-item label="性别">
              <span>{{ this.userinfo.sex }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="手机">
              <span>{{ this.userinfo.phone }} </span></el-descriptions-item
            >
            <el-descriptions-item label="入职时间">
              <span>
                {{ this.userinfo.entryDate }}
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-dialog
          :title="title"
          :visible.sync="editFormVisible"
          width="30%"
          @click="closeDialog('edit')"
        >
          <el-form
            label-width="80px"
            ref="editForm"
            :model="editForm"
            :rules="rules"
          >
            <el-form-item label="姓名" prop="userName">
              <el-input
                size="small"
                v-model="editForm.userName"
                auto-complete="off"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input
                size="small"
                v-model="editForm.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="editForm.sex" label="男">男</el-radio>
              <el-radio v-model="editForm.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="新的密码" prop="pwd">
              <el-input
                size="small"
                v-model="editForm.pwd"
                placeholder="请输入新密码"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog('edit')"
              >取消</el-button
            >
            <el-button
              size="small"
              type="primary"
              :loading="loading"
              @click="submitForm('editForm')"
              >保存</el-button
            >
          </div>
        </el-dialog>
      </el-card>
    </el-row>
    <el-row :gutter="24">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>账户信息</span>
        </div>
        <div>
          <el-descriptions :column="2">
            <el-descriptions-item label="绑定邮箱">{{
              this.userinfo.email
            }}</el-descriptions-item>
            <el-descriptions-item label="密码">*********</el-descriptions-item>
            <el-descriptions-item label="角色">{{
              this.userinfo.authority
            }}</el-descriptions-item>
            <el-descriptions-item label="负责仓库">
              <span>
                {{ this.userinfo.depository }}
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
import { getuserdata, userupdate } from "../../api/userMG";
import {
  getCookie,
  validatePhone,
  validatePassword,
  validateUsername,
} from "../../utils/util";
export default {
  name: "account",
  data() {
    return {
      title: "",
      loading: false,
      principal: {
        principal: "",
      },
      editFormVisible: false, //控制编辑页面显示与隐藏
      // 编辑与添加
      editForm: {
        userName: "",
        phone: "",
        sex: "",
        pwd: "",
        id: 0,
      },
      // cookie中的基本用户信息对象
      user: {
        id:0,
        userName: "",
        store: "",
        role: "",
        useremail: "",
      },
      // 用户信息
      userinfo: {
        userName: "",
        authority: "",
        sex: "",
        depository: "",
        entryDate: "",
        email: "",
        phone: "",
        pwd: "",
        id: 0,
      },
      //rules前端验证
      rules: {
        userName: [
          { required: true, validator: validateUsername, trigger: "blur" },
        ],
        pwd: [{ required: true, validator: validatePassword, trigger: "blur" }],
        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
      },
    };
  },
  // 导入组件
  components: {},
  // 创建完毕状态(里面是操作)
  created() {
    // cookie中读取邮箱
    this.user = JSON.parse(getCookie("userdata"));
    this.principal.principal = this.user.useremail;
    // 获取当前用户的个人信息
    this.getdata(this.principal);
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == "edit") {
        this.editFormVisible = false;
      } else if (dialog == "perm") {
        this.dataAccessshow = false;
      } else if (dialog == "unit") {
        this.unitAccessshow = false;
      }
    },
    handleEdit() {
      this.editFormVisible = true;
      this.title = "修改用户信息";
      this.editForm.userName = this.userinfo.userName;
      this.editForm.phone = this.userinfo.phone;
      this.editForm.sex = this.userinfo.sex;
      this.editForm.pwd = this.userinfo.pwd;
      this.editForm.id = this.userinfo.id;
    },
    // 编辑、添加提交方法
    submitForm(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          // 请求方法
          userupdate(this.editForm)
            .then((res) => {
              this.editFormVisible = false;
              this.loading = false;
              if (res.status == 201) {
                this.getdata(this.principal);
                this.$message({
                  type: "success",
                  message: "数据保存成功！",
                });
              } else {
                this.$message({
                  type: "info",
                  message: res.statusInfo.message,
                });
              }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.loading = false;
              this.$message.error("保存失败，请稍后再试！");
            });
        } else {
          return false;
        }
      });
    },
    // 获取当前用户的个人信息
    getdata(params) {
      getuserdata(params).then((res) => {
        if (res.status == 200) {
          console.log(res.data);
          this.userinfo = res.data;
        } else {
          this.$message.error(res.statusInfo.message);
          this.logining = false;
          return false;
        }
      });
    },
  },
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.descitem {
  margin: 2;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 4%;
  margin-bottom: 4%;
  margin-left: 6%;
  margin-right: 6%;
  width: 1100px;
}
</style>